<template>
  <view>
    <!-- 商品列表渲染 -->
    <view v-if="cartList.length > 0" class="goods-list">
      <view class="cart-item" v-for="item in cartList" :key="item.goods_id">
        <!-- radio 小程序组件库自带的 -->
        <radio
          @click="changeRadioStatus(item.goods_id)"
          :checked="item.goods_select"
          color="#EB4450"
        />
        <view class="cart-count">
          <u-number-box
            @change="valChange"
            @overlimit="overlimit($event, item.goods_id)"
            :value="item.goods_count"
            :name="item.goods_id"
          />
        </view>
        <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
        <navigator class="goods-item" hover-class="none" :url="`/pages/index/index`">
          <!-- 商品图片 -->
          <image class="goods-image" :src="item.goods_small_logo" mode="aspectFit" />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
    </view>
    <u-empty v-else mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
      <navigator url="/pages/index/index" open-type="switchTab" hover-class="none">
        <u-button type="primary">去逛逛吧~</u-button>
      </navigator>
    </u-empty>
    <!-- 底部操作栏占位 -->
    <view class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio class="select-radio" @click="allSelected" :checked="isAllSelected" color="#EB4450">
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ selectedCartListPrice }}</text>
        </view>
        <!-- 结算 -->
        <view class="account" @click="gotoPay">去结算({{ selectedCartListCount }})</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    cartList() {
      // 将vuex里面的值 深拷贝， 创建一个新地址，和vuex的值进行区分
      return JSON.parse(JSON.stringify(this.$store.state.cartList));
    },
    ...mapGetters(['isAllSelected', 'selectedCartListCount', 'selectedCartListPrice']),
  },
  methods: {
    changeRadioStatus(id) {
      // 从购物车的数组里面 筛选出来当前用户点的是数组里面的哪一项
      // findIndex find
      const currentItem = this.cartList.find((item) => item.goods_id === id);
      currentItem.goods_select = !currentItem.goods_select;

      this.$store.commit('updateCartList', this.cartList);
    },
    // 步进器的回调事件
    valChange(e) {
      // console.log(e);
      const currentItem = this.cartList.find((item) => item.goods_id === e.name);
      currentItem.goods_count = e.value;
      this.$store.commit('updateCartList', this.cartList);
    },
    // 步进器超过了阈值以后的回调函数
    overlimit(type, id) {
      const that = this;
      console.log(type, id);
      if (type === 'minus') {
        uni.showModal({
          title: '提示',
          content: '这是一个模态弹窗',
          confirmText: '删除',
          // confirmColor 在不同的平台，默认颜色是不一样的。需要我们手动设置
          // 保证多端开发的产品 样式统一
          confirmColor: '#f00',
          // success:(res) => {
          success(res) {
            if (res.confirm) {
              that.deleteCart(id);
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      }
    },
    deleteCart(id) {
      // 数组里面删除元素：  splice   任意位置删除， 还可以替换或者新增
      // push 后面添加 unshift 前面添加
      // pop  后面删除 shift   前面删除
      const currentIndex = this.cartList.findIndex((item) => item.goods_id === id);
      this.cartList.splice(currentIndex, 1);
      this.$store.commit('updateCartList', this.cartList);
    },
    // 点击全选按钮
    allSelected() {
      // this.isAllSelected 将这个变量当做全选 单选框的 初始值
      const isSelect = this.isAllSelected;
      // 将所有商品的 goods_select 状态变为 true 或者 false
      this.cartList.forEach((item) => {
        item.goods_select = !isSelect;
      });
      this.$store.commit('updateCartList', this.cartList);
    },
    gotoPay() {
      // 只有勾选了商品，才能跳转到结算页面，否则就是提示用户去勾选商品
      // this.selectedCartListCount这个数量是 vuex里面的 getters计算出来的， 返回值要么是0， 要么是非0
      if (this.selectedCartListCount) {
        uni.navigateTo({
          url: '/pages/pay/index',
        });
      } else {
        return uni.showToast({
          icon: 'error',
          title: '请选择商品',
          mask: true,
        });
      }
    },
  },
};
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
